<template>
  <div>
    <div>
      <h4>上传附件</h4>
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-upload
            class="upload-demo"
            :action="uploadFileUrl"
            :file-list="pgForm.fileList"
            accept=".doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.pdf"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-preview="handlePreview"
            :headers="headers">
            <el-button v-if="assessRoute" size="small" type="primary">请选择文件</el-button>
            <el-button v-else slot="tip" size="small" type="primary" disabled>请选择文件</el-button>
            <div slot="tip" class="el-upload__tip">可上传格式为.doc/.docx/.xls/.xlsx/.jpg/.jpeg/.png/.pdf的文件，且大小不超过50M。</div>
          </el-upload>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";
import bus from "@/utils/eventBus";


export default {
  name: "upload_attachments",
  title: "上传附件",
  created() {
    if(this.istrans){
      this.pgForm=this.fromdata
    }
    bus.$on('assessDetail',assessRoute=>{
      this.assessRoute=assessRoute.includes('Execute/detail')
    })
    bus.$emit('watch1')
  },
  mounted() {

  },
  beforeDestroy() {
    bus.$off('assessDetail')
  },
  props: {
    fromdata:{},
    istrans:false,
  },
  data() {
    return {
      assessRoute:'',
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      pgForm: {
        fileList: [],
      },
      headers: {
        Authorization: "Bearer " + getToken(),
      },

    };
  },
  methods: {
    //上传文件大小和格式校验
    beforeUpload(file){
      let fileType =file.name.substring(file.name.lastIndexOf('.')+1)
      const isFile =
        fileType === "doc" ||
        fileType === "docx" ||
        fileType === "xls" ||
        fileType === "xlsx" ||
        fileType === "jpg" ||
        fileType === "jpeg" ||
        fileType === "png" ||
        fileType === "pdf"
      if (!isFile) {
        this.$message.error("请选择正确的文件格式")
        return false
      }

      const isLt50M = file.size / 1024 / 1024 < 50
      if (!isLt50M) {
        this.$message.error("上传附件大小不能超过 50MB!")
      }
      return isLt50M && isFile
    },
    //上传成功
    handleSuccess(res){
      this.pgForm.fileList.push({
        name: res.newFileName,
        url:  res.fileName
      })
      this.$modal.msgSuccess("上传成功");
    },
    //点击文件列表中已上传文件进行下载
    handlePreview(file) {
      let a = document.createElement('a');
      let event = new MouseEvent('click');
      a.download = file.name;
      a.href = process.env.VUE_APP_BASE_API+file.url;
      a.dispatchEvent(event);
    },

    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    //并没有真的删除
    handleRemove(file, fileList) {
      this.pgForm.fileList=fileList
    },
  }
}
</script>

<style scoped>
.el-row{
  margin: 10px 0;
  padding: 20px 20px;
  background-color: #f9f9f9;
}
</style>

